<template>
  <div class="table-box" :class="{ emptySmall: emptySmall }">
    <el-table
      ref="table"
      v-loading="loading"
      :data="tableData"
      :size="size"
      border
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
      :show-summary="showSummary"
      :summary-method="getSummaries"
    >
      <el-empty
        slot="empty"
        :image="require('@/assets/images/empty.png')"
        :image-size="260"
      ></el-empty>
      <el-table-column
        v-if="needCheckbox"
        :selectable="selectable"
        type="selection"
        width="55"
        align="center"
        fixed="left"
      >
      </el-table-column>
      <el-table-column
        v-for="(item, index) in columns"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :align="item.align"
        :min-width="item.minWidth"
        show-overflow-tooltip
        :fixed="item.fixed"
      >
        <template #default="scope">
          <template v-if="item.slot">
            <!-- 根据实际情况修改，传入插槽 -->
            <slot
              :name="item.prop"
              :index="scope.$index"
              :row="scope.row"
            ></slot>
          </template>
          <template v-else>
            <span>{{ scope.row[item.prop] }}</span>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination-container" v-if="needPagination">
      <el-pagination
        :currentPage.sync="pageParams.currentPage"
        :page-size="pageParams.pageSize"
        small="small"
        background
        :page-sizes="[5, 10, 20, 30, 50, 80, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
    size: {
      type: String,
      default: "small",
    },
    tableData: {
      type: Array,
    },
    needCheckbox: {
      type: Boolean,
      default: false,
    },
    statusList: {
      type: Array,
      default: () => [],
    },
    total: {
      type: Number,
      default: 0,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    loading: {
      type: Boolean,
    },
    needPagination: {
      type: Boolean,
      default: true,
    },
    selectableFun: {
      type: Function,
      default: () => true,
    },
    emptySmall: {
      //控制暂无数据的图片大小
      type: Boolean,
      default: false,
    },
    showSummary: {
      //表尾合计
      type: Boolean,
      default: false,
    },
    showSummaryColumns: {
      //需要进行表尾合计的列
      type: Array,
      default: () => [],
    },
    tableDataAll: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      pageParams: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
      },
    };
  },
  watch: {
    pageSize: {
      immediate: true,
      handler(val) {
        if (val) {
          this.pageParams.pageSize = val;
        }
      },
    },
  },
  methods: {
    selectable(row) {
      return this.selectableFun(row);
    },
    getSummaries(param) {
      let data = [];
      if(this.tableDataAll.length > 0) {
        data = this.tableDataAll;
      } else  {
        data = param.data;
      }
      const columns = param.columns;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        if (this.showSummaryColumns.indexOf(column.property) == -1) {
          return;
        }

        const values = data.map((item) => Number(item[column.property]));
        let num = values.reduce((prev, curr) => {
          const value = Number(curr);
          if (!isNaN(value)) {
            return prev + curr;
          } else {
            return prev;
          }
        }, 0);
        sums[index] = parseFloat(num.toFixed(2));
      });
      return sums;
    },
    handleSizeChange(val) {
      this.pageParams.pageSize = val;
      this.$emit("handleSizeChange", this.pageParams);
    },
    handleCurrentChange(val) {
      this.pageParams.currentPage = val;
      this.$emit("handleCurrentChange", this.pageParams);
    },
    handleSelectionChange(val) {
      this.$emit("selectionChange", val);
    },
    toPageFirst() {
      this.pageParams.currentPage = 1;
    },
  },
};
</script>

<style lang="scss" scoped>
.emptySmall {
  ::v-deep .el-empty {
    padding: 0;
  }
  ::v-deep .el-empty__image {
    width: 80px !important;
  }
  ::v-deep .el-empty__description {
    margin-top: 0;
    p {
      font-size: 12px;
    }
  }
}
</style>
